<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Wanghao | 亮暗模式切换</title>	
		<link rel="stylesheet" href="css/style.css">
			
	</head>
	<body>
	  <input id="color-mode" type="checkbox" name="color-mode">
	  <label for="color-mode">
	    <span class="dark-mode-hide">Dark Mode</span>
	    <span class="light-mode-hide">Light Mode</span>
	  </label>
	  <div class="color-scheme-wrapper">
	    <h1>没有Javascript的亮暗模式切换</h1>
	    <p>人们靠分开后的<strong>痛觉</strong>, 来分辨自己爱的<strong>深浅</strong></p>
	    <p>时间是不会流逝的，流逝的是我们。</p>
		<p>死亡不是失去了生命，而是走出了时间。</p>
	    <p><strong>本示例使用：</strong></p>
	    <ul>
	      <li>不使用<code>javascript</code></li>
	      <li><code>media-queries</code> 默认为用户首选项。</li>
	      <li><code>css variables</code> 使样式方式更容易。</li>
	    </ul>
	    <p>如果您有兴趣学习如何制作:<a href="https://gitee.com/haiyongcsdn/dark-mode-toggle/">gitee.com</a></p>
	    <p>或者这里: <a href="https://blog.csdn.net/qq_44273429/article/details/114849256">海拥CSDN博客</a></p>  
	  </div>
	</body>
</html>
